<template>
  <div class="page-content">
    <div class="top-box">
      <div class="title-box">
        <span class="title-text">商品详情</span>
      </div>
    </div>
    <div class="content">
      <div class="goods-cover-box">
        <div class="goods-img-box">
          <img src="../image/phone.png" alt="" />
        </div>
        <div class="goods-details-box">
          <div class="goods-title">Apple iPhone 13 Pro 远峰蓝色</div>
          <div class="goods-tips">
            自适应高刷新率，画面更流畅、响应更灵敏，电影效果模式随手拍大片！
          </div>
          <div class="goods-price-box">
            <div class="price">7999.00元</div>
            <div class="price-orgin">8999.00元</div>
          </div>
          <div class="goods-btns-box">
            <el-button type="success" :size="160" class="goods-btn" @click="nowBuy"
              >立即选购</el-button
            >
            <el-button type="success" class="goods-btn">加入购物车</el-button>
          </div>
          <div class="ad-list-box">
            <div class="ad-item-box">
              <div class="ad-item-left">承诺</div>
              <div class="ad-item-right">
                <a
                  title="满足7天无理由退换货申请的前提下，包邮商品需要买家承担退货邮费，非包邮商品需要买家承担发货和退货邮费。"
                  class="ad-details"
                  href="javascript:;"
                >
                  <img class="ad-img" src="../image/7d.jpg" alt="" />
                  7天无理由
                </a>
              </div>
            </div>
            <div class="ad-item-box">
              <div class="ad-item-left">支付</div>
              <div class="ad-item-right">
                <a title="" class="ad-details" href="javascript:;">
                  <img class="ad-img" src="../image/hua.png" alt="" />
                  蚂蚁花呗
                </a>
              </div>
              <div class="ad-item-right">
                <a title="" class="ad-details" href="javascript:;">
                  <img class="ad-img" src="../image/card.png" alt="" />
                  信用卡支付
                </a>
              </div>
              <div class="ad-item-right">
                <a title="" class="ad-details" href="javascript:;">
                  <img class="ad-img" src="../image/ji.png" alt="" />
                  集分宝
                </a>
              </div>
            </div>
            <div class="ad-item-box">
              <div class="ad-item-left">承诺</div>
              <div class="ad-item-right">
                <div class="ad-tips">
                  折旧变现，买新更省钱。
                  <a class="see-details" href="javascript:;">详情</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 弹出框 -->
    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
    <span>
      It should be noted that the content will not be aligned in center by
      default
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="centerDialogVisible = false">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>

<script>
// import { getGoodsDetail, login } from "../yang/api";
export default {
  data() {
    return {
      msg: "111",
      centerDialogVisible: false
    };
  },
  created() {
    // this.loginFn();
  },
  methods: {
    nowBuy() {
      this.centerDialogVisible = true
    },
    loginFn() {
      login({
        mallUserLoginParam: {
          loginName: "16670918239",
          passwordMd5: "123456",
        },
      })
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getGoodsDetailFn() {
      // getGoodsDetail({ goods });
    },
  },
};
</script>
<style>
@media screen and (max-width: 1225px) {
  body {
    width: 1226px;
  }
}

body {
  display: block;
  background-color: #fff;
  color: #000000;
}

#app {
  display: block;
  padding: 0;
  margin: 0;
  max-width: none;
}
.page-content div {
  box-sizing: border-box;
}
.page-content a {
  text-decoration: none;
  cursor: pointer;
}

.top-box {
  width: 100%;
  background-color: #f0f0f0;
  height: 58px;
}
.title-box {
  width: 1226px;
  margin: 0 auto;
}
.title-text {
  width: 300px;
  height: 58px;
  line-height: 58px;
  font-size: 22px;
  font-weight: bold;
}
.content {
  width: 1226px;
  margin: 0 auto;
}
.goods-cover-box {
  width: 100%;
  padding: 20px 0;
  display: flex;
  justify-content: space-around;
  align-content: center;
}
.goods-img-box {
  width: 560px;
  height: 480px;
  display: flex;
  place-items: center;
}
.goods-img-box img {
  width: auto;
  height: auto;
  margin: 0 auto;
}
.goods-details-box {
  width: 560px;
  height: 510px;
  background-color: #f8f8f8;
  padding: 20px;
}
.goods-title {
  font-size: 22px;
  font-weight: 700;
}
.goods-tips {
  font-size: 16px;
  color: #b0b0b0;
  margin-top: 44px;
}
.goods-price-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 80px;
}
.price {
  font-size: 18px;
  color: #1baeae;
  font-weight: 700;
}
.price-orgin {
  font-size: 14px;
  margin-left: 5px;
  color: #b0b0b0;
  text-decoration: line-through;
  font-weight: 700;
}
.ad-list-box {
  width: 100%;
}
.ad-item-box {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.ad-item-left {
  width: 60px;
  color: #6c6c6c;
}
.ad-details {
  display: flex;
  align-items: center;
  font-size: 11px;
  color: #6c6c6c;
}
.ad-img {
  width: 16px;
  height: 16px;
  margin-right: 2px;
}

.ad-item-right {
  margin-right: 15px;
}
.ad-tips {
  font-size: 11px;
}
.ad-tips .see-details {
  text-decoration: underline;
  color: #6c6c6c;
}
.goods-btns-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 70px;
  margin-bottom: 25px;
}
.goods-btns-box .goods-btn {
  width: 155px;
  height: 50px;
  border-radius: 0;
  margin-left: 40px;
  font-size: 18px;
  color: #fff;
  background-color: #1baeae;
  border: 1px solid #1baeae;
}
.goods-btns-box .goods-btn:hover {
  border: 1px solid #fff;
}
</style>
